<template>
    <div class="app-container">
        <div class="custom_card_0" v-show="showSearch">
            <el-form :model="queryParams" ref="queryForm" :inline="true" size="small">
                <el-form-item label1 label="围栏地址" prop="fenceAddress" label-width="70px">
                    <el-input v-model="queryParams.fenceAddress" placeholder="请输入围栏地址" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label1 label="围栏名称" prop="fenceName" label-width="90px">
                    <el-input v-model="queryParams.fenceName" placeholder="请输入围栏名称" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="custom_card">
            <el-row :gutter="10" class="mb10">
                <el-col :span="1.5">
                    <el-button size="medium" class="first-plain-btn" @click="handleAdd"
                        v-hasPermi="['car:information:add']">新&nbsp;&nbsp;增</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table v-loading="loading" :data="informationList" border>
                <el-table-column label="围栏名称" align="center" prop="fenceName" min-width="140"
                    :show-overflow-tooltip="true" />
                <el-table-column label="围栏地址" align="center" prop="fenceAddress" min-width="120"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" min-width="140"
                    :show-overflow-tooltip="true" />
                <el-table-column label="是否启用" align="center" prop="isAvailable" min-width="140"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.isAvailable" :active-value="1" :inactive-value="0"
                            disabled></el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" fixed="left" class-name="small-padding fixed-width"
                    width="240">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleUpdate(scope.row)"
                            v-hasPermi="['car:information:edit']">修改</el-button>
                        <el-button size="small" type="text" @click="handleInfo(scope.row)"
                            v-hasPermi="['car:information:edit']">详情</el-button>
                        <el-button size="small" type="text" @click="handleDelete(scope.row)"
                            v-hasPermi="['car:information:remove']">删除</el-button>
                        <el-button size="small" type="text" @click="bindDevice(scope.row)"
                            v-hasPermi="['car:information:remove']">绑定设备</el-button>
                        <el-button size="small" type="text" @click="delDevice(scope.row)"
                            v-hasPermi="['car:information:remove']">解绑设备</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
        <el-dialog :title="title" :visible.sync="deviceShow">
            <el-table :data="bindData" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column property="carNo" label="车牌号"></el-table-column>
                <el-table-column property="deviceNo" label="设备编号"></el-table-column>
                <el-table-column property="manufacturer" label="供应商">
                    <template slot-scope="scope">
                        <span v-if="scope.row.manufacturer == 5">车钥匙</span>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deviceCance">取 消</el-button>
                <el-button type="primary" @click="deviceSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listPrence, listDevice, delPrence, addBind, listBindDevice, updateBind } from "@/api/car/pence";

export default {
    name: 'Information',
    dicts: [],
    data() {
        return {
            // 弹框
            deviceShow: false,
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 设备信息表格数据
            informationList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                fenceAddress: null,
                fenceName: null,
                fenceType: 1,
            },
            // 表单参数
            form: {},
            // 表单校验
            bindData: [],
            title: '设备列表',
            selectBindList: [],
            selectPrenceData: {},
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 设备选中
        handleSelectionChange(val) {
            this.selectBindList = []
            console.log(val)
            if (val.length > 0) {
                val.map((res) => {
                    this.selectBindList.push(res.deviceId)
                })
            }
        },
        // 弹框确定
        deviceSubmit() {
            if (this.selectBindList.length > 0) {
                let param = {
                    fenceId: this.selectPrenceData.id,
                    deviceIdList: this.selectBindList
                }
                if (this.title == '设备列表') {
                    addBind(param).then((res) => {
                        if (res.code == 200) {
                            this.$message.success('绑定成功')
                            this.getList()
                            this.deviceShow = false
                        }
                    })
                } else {
                    updateBind(param).then((res) => {
                        if (res.code == 200) {
                            this.$message.success('解绑成功')
                            this.getList()
                            this.deviceShow = false
                        }
                    })
                }
            } else {
                this.$message.error('请先选择设备')
            }


        },
        // 弹框取消
        deviceCance() {
            this.deviceShow = false
            this.bindData = []
        },
        // 绑定设备弹框
        bindDevice(data) {
            this.selectPrenceData = data
            this.deviceShow = true
            this.title = '设备列表'
            this.getBindList()
        },
        // 解绑设备弹框
        delDevice(data) {
            this.selectPrenceData = data
            this.deviceShow = true
            this.title = '已绑设备列表'
            this.getOldBindList()
        },
        // 查询已绑定设备
        getOldBindList() {
            listBindDevice({ fenceId: this.selectPrenceData.id }).then((res => {
                if (res.code == 200) {
                    this.bindData = res.rows
                }
            }))

        },
        // 查询未绑定设备列表
        getBindList() {
            listDevice({ manufacturer: 5, fenceId: this.selectPrenceData.id }).then((res) => {
                if (res.code == 200) {
                    this.bindData = res.rows
                }
            })
        },

        /** 查询设备信息列表 */
        getList() {
            this.loading = true
            listPrence(this.queryParams).then((response) => {
                this.informationList = response.rows
                this.total = response.total
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.$router.push({ path: '/pence/add' })
        },
        alarmStatistics() {
            this.$router.push({ path: '/riskManagement/warn' });
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            console.log(row)
            this.$router.push({ path: '/pence/edit', query: { id: row.id } })
        },
        // 详情
        handleInfo(row) {
            this.$router.push({ path: '/pence/info', query: { id: row.id } })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const deviceIds = row.id
            this.$modal
                .confirm('是否确认删除该电子围栏？')
                .then(function () {
                    return delPrence(deviceIds)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                })
                .catch(() => { })
        },
    },
}
</script>